<template>
	<view class="points-mall">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="banner">
			<template v-if="bannerList.length>0">
				<gyd-swiper :list="bannerList"></gyd-swiper>
			</template>
		</view>

		<view class="product-list">
			<integral-goods :goods="item" v-for="(item, index) in productList" :key="index"></integral-goods>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '积分商城',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		bannerList: [],
		isMore: true,
		productList: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		getBanner();
		getGoodsList();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
		state.productList = [];
		getGoodsList();
	})

	onReachBottom(() => {
		console.log('触底加载更多');
		getGoodsList();
	})

	function getBanner() {
		request.get('content/banner', {
			position_id: 10
		}).then(res => {
			console.log('轮播图', res);
			state.bannerList = res.data;
		})
	}

	function getGoodsList() {
		if (!state.isMore) {
			util.showTip('没有更多了');
			return;
		}
		request.get('goods/goodsList', {
			goods_type: 1,
			skip: state.productList.length,
		}).then(res => {
			console.log('积分商品', res);
			state.isMore = res.data.is_more;
			if (state.productList.length == 0) {
				state.productList = res.data.list;
			} else {
				state.productList = state.productList.concat(res.data.list);
			}
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		bannerList,
		isMore,
		productList,
	} = toRefs(state);
</script>

<style lang="scss">
	.points-mall {
		.banner {}

		.product-list {
			@include f-between;
			flex-wrap: wrap; // 换行
			padding: $m16 $m20 0;
		}
	}
</style>